<template>
	<view class="containers">
		<image src="https://star.googom.cn/chuangge/ashkhfad.png" mode="" class="index_bj"></image>
		<view class="container">
			<view class="allHead" :style="{height:topTitBox+'px',backgroundColor:config.bgcolor}">
				<view class="title" :style="{height:nHeight+'px',marginTop:phoneInfo.statusBarHeight+'px'}">
					<view class="biaotimia" @click="getloupan">
						<view class="biaotimia_name" v-if="isgosem == true">
							请登录
						</view>
						<view class="biaotimia_name" v-if="isgosem == false && projectname == ''">
							请选楼盘
						</view>
						<view class="biaotimia_name" v-if="isgosem == false && projectname != ''">
							{{projectname}}
						</view>
						<image src="https://star.googom.cn/chuangge/xiala.png" mode="" class="xiala"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="xuianfu_fex">
			<image src="https://star.googom.cn/chuangge/dehadasdad.png" mode="aspectFill" class="ceshisjushui">
			</image>
			<view class="shuju_flex">
				<view class="shuju_flex_cloum" @click="getlaidian">
					<view class="shuju_flex_cloum_name">
						{{shujus.phoneNumbers == undefined ? 0 : shujus.phoneNumbers }}
					</view>
					<view class="shuju_flex_cloum_names">
						来电<text>(组)</text>
					</view>
				</view>
				<view class="shuju_flex_cloum" @click="getlaifang">
					<view class="shuju_flex_cloum_name">
						{{shujus.visitNumbers == undefined ? 0 : shujus.visitNumbers }}
					</view>
					<view class="shuju_flex_cloum_names">
						来访<text>(组)</text>
					</view>
				</view>
				<view class="shuju_flex_cloum">	
					<view class="shuju_flex_cloum_name">
						{{shujus.initiation == undefined ? 0 : shujus.initiation }}
					</view>
					<view class="shuju_flex_cloum_names">
						入会<text>(组)</text>
					</view>
				</view>
			</view>
			<view class="shuju_flex" style="margin-bottom: 36rpx;">
				<view class="shuju_flex_cloum">
					<view class="shuju_flex_cloum_name">
						{{shujus.subscribe == undefined ? 0 : shujus.subscribe }}
					</view>
					<view class="shuju_flex_cloum_names">
						认筹<text>(组)</text>
					</view>
				</view>
				<view class="shuju_flex_cloum">
					<view class="shuju_flex_cloum_name">
						{{shujus.reserveSmall == undefined ? 0 : shujus.reserveSmall }} 
					</view>
					<view class="shuju_flex_cloum_names">
						小定<text>(组)</text>
					</view>
				</view>
				<view class="shuju_flex_cloum">
					<view class="shuju_flex_cloum_name">
						{{shujus.reserveBig == undefined ? 0 : shujus.reserveBig }} 
					</view>
					<view class="shuju_flex_cloum_names">
						大定<text>(组)</text>
					</view>
				</view>
			</view>
			<view class="shuju">
				<view class="shuju_one">
					<view class="ilinsd" style="background-color: #DC8FB1;"></view>
					<view class="shy_name">
						成交套数<text>(组)</text>
					</view>
				</view>
				<view class="sbhujusd">
					{{shujus.deal  == undefined ? 0 : shujus.deal }} 
				</view>
			</view>
			<view class="shuju">
				<view class="shuju_one">
					<view class="ilinsd" style="background-color: #A89AD7;"></view>
					<view class="shy_name">
						交付套数<text>(组)</text>
					</view>
				</view>
				<view class="sbhujusd">
					{{shujus.delivery  == undefined ? 0 : shujus.delivery }} 
				</view>
			</view>
			<view class="shuju">
				<view class="shuju_one">
					<view class="ilinsd" style="background-color: #EAAE61;"></view>
					<view class="shy_name">
						销售货值<text>(元)</text>
					</view>
				</view>
				<view class="sbhujusd">
					{{shujuss.total  == undefined ? 0 : shujuss.total }} 
				</view>
			</view>
			<view class="shuju">
				<view class="shuju_one">
					<view class="ilinsd" style="background-color: #947964;"></view>
					<view class="shy_name">
						剩余货值<text>(元)</text>
					</view>
				</view>
				<view class="sbhujusd">
					80,790
				</view>
			</view>
			<view class="shuju">
				<view class="shuju_one">
					<view class="ilinsd" style="background-color: #43D2EB;"></view>
					<view class="shy_name">
						待回款额<text>(元)</text>
					</view>
				</view>
				<view class="sbhujusd">
					{{shujuss.unpaid  == undefined ? 0 : shujuss.unpaid }} 
				</view>
			</view>
			<view style="width: 100%;background-color: #F5F7FB;">
				<view class="shuju">
					<view class="shuju_one">
						<view class="ilinsd" style="background-color: #05CF67;"></view>
						<view class="shy_name">
							销售佣金<text>(元)</text>
						</view>
					</view>
					<view class="sbhujusd">
						{{shujuss.commission  == undefined ? 0 : shujuss.commission }} 
					</view>
				</view>
			</view>
			<view class="bvol"></view>
		</view>
		<!-- 商品信息 -->
		<view class="isfadfgafas" v-if="show == true">
			<view class="allHeads" :style="{backgroundColor:config.bgcolor}">
				<view class="titles" :style="{marginTop:phoneInfo.statusBarHeight+'px'}">
					<image src="https://star.googom.cn/chuangge/snajiaoxing.png" mode="" class="snajiaoxing"></image>
				</view>
				<view class="loupoan_flex">
					<view class="loupan_flkex">
						<view class="xiangnmu_name">
							选择项目
						</view>
						<image src="https://star.googom.cn/chuangge/loupna_icon.png" mode="" class="loupna_icon">
						</image>
					</view>
					<view class="lou_felxss">
						<view :class="lpindex == index ? 'sheuqu':'sheuqus'" v-for="(item,index) in louan" :key="index"
							@click="getxuanze(index)">
							{{item.projectName}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 登录弹窗 -->
		<login :show="shows" @loadpage="closepage" @closepage="closepage" @payment-success="refreshArray"></login>
	</view>
</template>

<script>
	import login from '@/components/login/login.vue'
	export default {
		components: {
			login
		},
		data() {
			return {
				phoneInfo: uni.getSystemInfoSync(),
				jnInfo: uni.getMenuButtonBoundingClientRect(),
				// 整体盒子高度
				topTitBox: 0,
				// 平行胶囊高度
				nHeight: 0,
				lpindex: 0,
				show: false,
				shows: false,
				isgosem: false,
				louan: [],
				projectname: '',
				projectnameid: 0,
				bumenid: 0,
				bumenm: {},
				shujus:{},
				shujuss:{}
			}
		},
		onLoad() {
			this.topTitBox = this.jnInfo.top - this.phoneInfo.statusBarHeight + this.jnInfo.bottom;
			// (this.jnInfo.top - this.phoneInfo.statusBarHeight) * 2 目的是计算出上下高度 + 胶囊本身高度
			this.nHeight = this.jnInfo.height + (this.jnInfo.top - this.phoneInfo.statusBarHeight) * 2
		},
		onHide() {
			this.show = false
		},
		onShow() {
			var taht = this
			var token = uni.getStorageSync('token');
			if (token == '' || token == null || token == undefined) {
				taht.isgosem = true
			} else {
				taht.isgosem = false
				//楼盘列表
				taht.getprojectlist()
			}
		},
		methods: {
			//来电
			getlaidian() {
				uni.navigateTo({
					url: '/pages/page/customer/visit'
				})
			},
			//来访
			getlaifang() {
				uni.navigateTo({
					url: '/pages/page/customer/Incoming'
				})
			},
			refreshArray() {
				var taht = this
				var token = uni.getStorageSync('token');
				if (token == '' || token == null || token == undefined) {
					taht.isgosem = true
				} else {
					taht.isgosem = false
					//楼盘列表
					taht.getprojectlist()
				}
			},
			//楼盘列表
			async getprojectlist() {
				var that = this
				let data = await that.$api.projectlist();
				if (data.code == 200) {
					that.louan = data.rows
					const uniqueArr = [];
					const map = new Map();
					for (const item of that.louan) {
						if (!map.has(item.projectId)) {
							map.set(item.projectId, true);
							uniqueArr.push(item);
						}
					}
					that.louan = uniqueArr
					//查询默认楼盘
					that.getprofile()
				} else {
					uni.showToast({
						title: data.msg,
						icon: 'none'
					})
				}
			},
			//查询默认楼盘
			async getprofile() {
				var that = this
				let data = await that.$api.profile();
				if (data.code == 200) {
					that.bumenm = data.data
					var bumenname = that.bumenm.dept.deptName
					that.bumenid = that.bumenm.dept.deptId
					const index = that.louan.findIndex(item => {
						return item.projectName === bumenname;
					});
					that.lpindex = index
					that.projectname = that.louan[index].projectName
					that.projectnameid = that.louan[index].projectId
					uni.setStorageSync('projectnameid',that.louan[index].projectId)
					that.getNumberss()
					that.getSaless()
					
				} else {
					uni.showToast({
						title: data.msg,
						icon: 'none'
					})
				}
			},
			//选择楼盘
			getxuanze(e) {
				this.lpindex = e
				this.projectname = this.louan[e].projectName
				this.projectnameid = this.louan[e].projectId
				uni.setStorageSync('projectnameid',this.louan[e].projectId)
				this.getNumberss()
				this.getSaless()
				this.show = false
			},
			//楼盘数据
			async getNumberss() {
				var that = this
				let data = await that.$api.getNumbers({
					projectId:that.projectnameid
				});
				if (data.code == 200) {
					that.shujus = data.data
				} else {
					uni.showToast({
						title: data.msg,
						icon: 'none'
					})
				}
			},
			//楼盘数据
			async getSaless() {
				var that = this
				let data = await that.$api.getSales({
					projectId:that.projectnameid
				});
				if (data.code == 200) {
					that.shujuss = data.data
				} else {
					uni.showToast({
						title: data.msg,
						icon: 'none'
					})
				}
			},
			//关闭弹窗
			closepage() {
				this.shows = false
			},
			//打开楼盘
			getloupan() {
				let userinfo = uni.getStorageSync('token');
				if (userinfo) {
					if (this.show == false) {
						this.show = true
					} else {
						this.show = false
					}
				} else {
					setTimeout(() => {
						this.shows = true
					}, 500)
				}
			},
		}
	}
</script>

<style lang="scss">
	.containers {
		width: 100%;
		height: 100vh;
		background-color: #F5F7FB;

		.index_bj {
			width: 750rpx;
			height: 968rpx;
		}

		.container {
			width: 100%;

			.allHead {
				width: 100%;
				height: 668rpx;
				position: fixed;
				top: 0%;
				z-index: 90;

				.title {
					width: 70%;
					display: flex;
					align-items: center;
					justify-content: space-between;
					color: #ffffff;

					.biaotimia {
						display: flex;
						flex-direction: row;
						justify-content: flex-start;
						align-items: center;
						margin-left: 32rpx;

						.biaotimia_name {
							font-size: 32rpx;
							font-weight: bold;
							color: #08112C;
						}

						.xiala {
							width: 32rpx;
							height: 32rpx;
							margin-left: 4rpx;
						}
					}
				}

			}
		}

		.xuianfu_fex {
			position: relative;
			margin-top: -780rpx;

			.ceshisjushui {
				width: 750rpx;
				height: 374rpx;
			}

			.shuju_flex {
				width: 100%;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				margin-top: 32rpx;

				.shuju_flex_cloum {
					width: 250rpx;
					display: flex;
					flex-direction: column;
					justify-content: flex-start;
					align-items: center;

					.shuju_flex_cloum_name {
						font-size: 64rpx;
						color: #08791B;
					}

					.shuju_flex_cloum_names {
						font-size: 26rpx;
						font-weight: bold;
						color: #08112C;

						text {
							font-size: 26rpx;
							font-weight: bold;
							color: #7C849C;
						}
					}
				}
			}
		}

		.shuju {
			width: 662rpx;
			height: 88rpx;
			border-radius: 28rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 20rpx 60rpx 0rpx rgba(27, 93, 59, 0.05);
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			margin-left: 44rpx;
			margin-top: 20rpx;

			.shuju_one {
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				align-items: center;
				margin-left: 22rpx;

				.ilinsd {
					width: 6rpx;
					height: 32rpx;
					border-radius: 76rpx;
					background: #FF1A0C;
				}

				.shy_name {
					font-size: 28rpx;
					font-weight: bold;
					color: #08112C;
					margin-left: 12rpx;

					text {
						font-size: 28rpx;
						font-weight: bold;
						color: #7C849C;
					}
				}
			}

			.sbhujusd {
				font-size: 48rpx;
				color: #08791B;
				margin-right: 60rpx;
			}
		}
	}

	.snajiaoxing {
		width: 40rpx;
		height: 20rpx;
		margin-top: 80rpx;
		margin-left: 157rpx;
	}

	.allHeads {
		width: 100%;

		.titles {
			width: 70%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			color: #ffffff;
		}
	}

	.loupoan_flex {
		width: 688rpx;
		border-radius: 32rpx;
		background: #FFFFFF;
		margin-left: 32rpx;
		padding-bottom: 48rpx;
		box-sizing: border-box;

		.loupan_flkex {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: flex-start;

			.xiangnmu_name {
				font-size: 32rpx;
				font-weight: bold;
				color: #08112C;
				margin-left: 32rpx;
				margin-top: 44rpx;
			}

			.loupna_icon {
				width: 220rpx;
				height: 206rpx;
				margin-right: 26rpx;
				margin-top: 8rpx;
			}
		}

		.lou_felxss {
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			padding-left: 8rpx;
			box-sizing: border-box;
			position: relative;
			margin-top: -100rpx;

			.sheuqu {
				width: 300rpx;
				height: 96rpx;
				border-radius: 16rpx;
				background: #05CF67;
				margin-left: 24rpx;
				margin-top: 24rpx;
				font-size: 32rpx;
				font-weight: bold;
				color: #FFFFFF;
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;
			}

			.sheuqus {
				width: 300rpx;
				height: 96rpx;
				border-radius: 16rpx;
				background: #F5F7FB;
				margin-left: 24rpx;
				margin-top: 24rpx;
				font-size: 32rpx;
				font-weight: bold;
				color: #08112C;
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;
			}
		}
	}

	.isfadfgafas {
		position: absolute;
		top: 0;
		left: 0;
	}
</style>